<template>
  <div class="home">
    <banner class="clearfix">
      <div v-for="item in bannerList">
        <div class="wrap">
          <div class="desc">
            <h2 class="banner-title">微盟微站</h2>
            <p class="text">
              完全可视化拖拽
            </p>
            <p class="text">
              三分钟打造自己的小程序
            </p>
          </div>

          <div class="bottom">
            <a :href="item.linkUrl" class="btn btn-big">免费注册</a>
            <a :href="item.linkUrl" class="btn btn-big">
              扫码体验
              <img src="./down_ico.jpg" class="down-ico" alt="..." />
            </a>
          </div>

          <div class="slider-img">
            <img :src="item.picUrl" alt="banner" />
          </div>
      </div>
      </div>
    </banner>
    <module-five></module-five>
    <module-one></module-one>
    <module-three></module-three>

    <div class="contact">
      <div class="wrap">
        <Row>
          <i-col span="24" class="module-title">
            <h3>联系我们</h3>
          </i-col>
        </Row>

        <Row>
          <i-col span="24" class="text g-mt20">
            <p>丰富模板、组件库 满足您的修改化需求，完美兼容小程序和公众号,体验更胜一筹</p>
          </i-col>
        </Row>
      </div>
      <div class="wrap clearfix g-mt30">
        <address-info></address-info>
        <div class="form-wrap">
          <write-form></write-form>
        </div>
      </div>
    </div>

    <news></news>
  </div>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import Banner from 'base/slider/slider'
  import Loading from 'base/loading/loading'
  import AddressInfo from 'base/Address/Address'
  import WriteForm from 'base/form/form'
  import ModuleOne from 'base/module_one/module_one'
  import ModuleThree from 'base/module_three/module_three'
  import ModuleFive from 'base/module_five/module_five'
  import News from 'base/news/news'

  import {ERR_OK} from 'api/config'
  import axios from 'axios'

  export default {
    data() {
      return {
        bannerList: []
      }
    },
    created() {
      this._getBannerList()
    },
    methods: {
      _getBannerList() {
        axios.get('/api/getBannerList').then((res) => {
          if (res.data.code === ERR_OK) {
            this.bannerList = res.data.data
          }
        }).catch(err => {
          console.log(err)
        })
        return null
      }
    },
    components: {
      Scroll,
      Banner,
      Loading,
      AddressInfo,
      WriteForm,
      ModuleOne,
      ModuleThree,
      ModuleFive,
      News
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"
  .home
    .slider
      .slider-item
        wh(100%, 500px)
        background-color: $main-color
        .wrap
          position: relative
          z-index: 1
          height: 100%
          .desc
            ltposition(40px, 118px)
            .banner-title
              sc(44px, $white)
              font-weight: bold
            .text
              margin-top: 10px
              line-height: 30px
              sc($font-large-x, $white)
          .bottom
            lbposition(40px, 100px)
            padding-right: 20px
            font-size: 0
            .btn
              position: relative
              width: 50%
              text-align: center
              &:first-child
                margin-right: 20px
              &:hover
                background-color: $white
                color: $main-color
                .down-ico
                  display: block
              .down-ico
                display: none
                ltposition(-1px, 120%)
                z-index: 4220
                width: 100%
                br(5px)
          .slider-img
            rtposition(0, 30px)
            font-size: 0
            transition: .4s ease
            img
              width: 100%
    .contact
      padding-top: 40px
      background: url('./contact-bg.png')no-repeat center center
      -webkit-background-size: cover
      background-size: cover
      color: $white
      .wrap
        .address-info
          width: 45%
        .form-wrap
          rtposition(0, 0)
          left: 50%
  @media(max-width:1200px)
    .slider
      .wrap
        .slider-img
          top: 90px
          width: 50%
  .loading-container
    display: block
    position: absolute
    width: 100%
    top: 50%
    transform: translateY(-50%)
</style>
